export default class BoardCanvas {
  constructor(container) {
    // 容器
    this.container = container
    // canvas画布
    this.canvas = this.createCanvas(container)
    // 绘制工具
    this.ctx = this.canvas.getContext('2d')
    // 起始点位置
    this.startX = 0
    this.stateY = 0
    // 画布历史栈
    this.pathSegmentHistory = []
    this.index = 0

    // 初始化
    this.init()
  }

  // 创建画布
  createCanvas(container) {
    const canvas = document.createElement('canvas')
    canvas.width = container.clientWidth
    canvas.height = container.clientHeight
    canvas.style.display = 'block'
    canvas.style.backgroundColor = 'antiquewhite'
    container.appendChild(canvas)
    return canvas
  }

  // 初始化
  init() {
    this.addPathSegment()
    this.setContext2DStyle()
    this.canvas.addEventListener('contextmenu', e => e.preventDefault())
    this.canvas.addEventListener('mousedown', this.mousedownEvent.bind(this))
    window.document.addEventListener('keydown', this.keydownEvent.bind(this))
  }

  // 设置画笔样式
  setContext2DStyle() {
    this.ctx.strokeStyle = '#EB7347'
    this.ctx.lineWidth = 3
    this.ctx.lineCap = 'round'
    this.ctx.lineJoin = 'round'
  }

  // 鼠标事件
  mousedownEvent(e) {
    const that = this
    const ctx = this.ctx
    ctx.beginPath()
    ctx.moveTo(e.offsetX, e.offsetY)
    ctx.stroke()

    this.canvas.onmousemove = function (e) {
      ctx.lineTo(e.offsetX, e.offsetY)
      ctx.stroke()
    }
    this.canvas.onmouseup = this.canvas.onmouseout = function () {
      that.addPathSegment()
      this.onmousemove = null
      this.onmouseup = null
      this.onmouseout = null
    }
  }

  // 键盘事件
  keydownEvent(e) {
    if(!e.ctrlKey) return
    switch(e.keyCode) {
      case 90:
        this.undo()
        break
      case 89:
        this.redo()
        break
    }
  }

  // 添加路径片段
  addPathSegment() {
    const data = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height)
    // 删除当前索引后的路径片段，然后追加一个新的路径片段，更新索引
    this.pathSegmentHistory.splice(this.index + 1) 
    this.pathSegmentHistory.push(data)
    this.index = this.pathSegmentHistory.length - 1 
  }

  // 撤销
  undo() {
    if(this.index <= 0) return
    this.index--
    this.ctx.putImageData(this.pathSegmentHistory[this.index], 0, 0)
  }
  // 恢复
  redo() {
    if(this.index >= this.pathSegmentHistory.length - 1) return
    this.index++
    this.ctx.putImageData(this.pathSegmentHistory[this.index], 0, 0)
  }
}
